<script setup lang="ts">
interface musicInfo {
  name: string,
  song: string
  id: string
}
import { ref, reactive, onMounted, toRaw } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
const dialogVisible = ref(false);
const searchValue = ref("");
const form = ref({
  name: "",
  song: "",
  id: "",
});
const newForm = ref({
  newName: "",
  newSong: "",
  musicId: "",
});
let musicList = ref();
const topList = ref<musicInfo[]>([
  { name: "我结婚了", song: "阔落", id: "1" },
  { name: "爱与诚", song: "古巨基", id: "2" },
  { name: "山楂树之恋", song: "程佳佳", id: "3" },
  { name: "落空", song: "印子月", id: "4" },
  { name: "我们俩", song: "郭顶", id: "5" },
  { name: "Glosses", song: "HelloPrinz", id: "6" },
  { name: "还是分开", song: "张叶蕾", id: "7" },
]);
const onSearchClick = () => {
  musicList.value = topList.value.filter(
    (music: musicInfo) =>
      music.name.includes(searchValue.value) ||
      music.song.includes(searchValue.value)
  );
};
const onBlurChange = () => {
  !searchValue.value && (musicList.value = topList.value);
};
const onAddMusicClick = () => {
  let { name, song, id } = form.value;
  if (name && song && id) {
    let index = topList.value.findIndex((item: musicInfo) => item.id === id);
    if (index != -1)
      return ElMessage({
        message: "id已存在,请修改id",
        type: "warning",
      });
    let musicInfo = toRaw(form.value);
    topList.value.unshift(musicInfo);
    musicList.value = topList.value;
  }
};
const onDelMusicClick = (id: string) => {
  let index = topList.value.findIndex((music: musicInfo) => music.id === id);
  topList.value.splice(index, 1);
};
const onEditMusicInfoClick = (id: string) => {
  let musicInfo = topList.value.find((music: musicInfo) => music.id === id) || {
    name: "",
    song: "",
    musicId: "",
  };
  let { name, song } = musicInfo;
  newForm.value = {
    newName: name,
    newSong: song,
    musicId: id,
  };
  dialogVisible.value = true;
};
const initEdit = () => {
  newForm.value = {
    newName: "",
    newSong: "",
    musicId: "",
  };
};
const onCloseClick = () => {
  initEdit();
};
const onConfirmEditMusicClick = () => {
  let { newName: name, newSong: song, musicId: id } = newForm.value;
  let index = topList.value.findIndex((music: musicInfo) => music.id === id);
  topList.value[index] = {
    name,
    song,
    id,
  };
  musicList.value = musicList.value;
  dialogVisible.value = false;
  initEdit();
};
onMounted(() => {
  musicList.value = topList.value;
});
</script>

<template>
  <div class="fruits">
    <div class="header">
      <el-input v-model="searchValue" class="input" @blur="onBlurChange" />
      <el-button type="primary" @click="onSearchClick">搜索</el-button>
    </div>
    <div class="header">
      <label for="">歌名</label>
      <el-input v-model="form.name" class="info" />
      <label for="">歌手</label>
      <el-input v-model="form.song" class="info" />
      <label for="">ID</label>
      <el-input v-model="form.id" class="info" />
      <el-button type="primary" @click="onAddMusicClick">添加</el-button>
    </div>
  </div>
  <el-card class="box-card" style="width: 450px">
    <template #header>
      <div class="card-header">
        <span>歌曲列表</span>
        <el-button class="button" type="text">复制歌单</el-button>
      </div>
    </template>
    <div v-for="music in musicList" :key="music.id" style="display: flex;align-items: center;">
      <div style="display: flex;justify-content: space-between;flex:1;margin-right: 50px;">
        <p>{{ music.name }} </p>
        <p>{{ music.song }}</p>
      </div>
      <div>
        <el-link type="primary" style="margin-right: 10px;" @click="onEditMusicInfoClick(music.id)">编辑</el-link>
        <el-link type="danger" @click="onDelMusicClick(music.id)">删除</el-link>
      </div>
    </div>
  </el-card>
  <el-dialog v-model="dialogVisible" title="编辑" width="30%" @closed="onCloseClick">
    <p>歌名</p>
    <el-input v-model="newForm.newName" class="info" />
    <br>
    <p>歌手</p>
    <el-input v-model="newForm.newSong" class="info" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmEditMusicClick">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped>
.fruits {
  display: flex;

  .header {
    margin-right: 60px;
    margin-bottom: 20px;

    .input {
      width: 200px;
      margin-right: 10px;
    }

    .info {
      width: 130px;
      margin-right: 10px;
    }
  }

  :deep(.card-header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
